<template>
  <div class='theoretical-learning'>
    <div class="banner">
      <div class="title-t">理论学习</div>
      <div class="title-b">理论宣传 推广普及社会科学理论 提高人们对客观世界规律的认识</div>
    </div>
    <!-- 宣讲动态 -->
    <div class="common-title main-wrapper">
      <!-- <div class="title"><span><span>学习</span>动态</span>/Learning dynamics</div> -->
      <div class="title"><span><span>学习</span>动态</span></div>
      <div class="more" @click="newTab('/trends-list?type=theory')">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="trends main-wrapper">
      <div class="trends-l">
        <div class="l-top" @click="toTrends(theoryList[0])">
          <template v-if="theoryList.length > 0">
            <div class="new-main">
              <div class="trend-date">{{ format(theoryList[0].pubDate) }}</div>
              <div class="title otw-1" :title="theoryList[0].name">{{ theoryList[0].name }}</div>
              <div class="new-desc otw-7">{{ extractText(theoryList[0].content) }}</div>
              <!-- <el-button class="more-button" type="primary" round>MORE</el-button> -->
            </div>
            <img class="top-img" :src="getImageUrl(theoryList[0].newsPicture)">
          </template>
        </div>
        <div class="l-bottom">
          <el-row :gutter="28">
            <template v-if="theoryList.length >= 2">
              <el-col v-for="(theory, thIndex) in theoryList.filter((_, filIndex) => filIndex > 0)" :key="thIndex"
                :span="thIndex == 1 ? 15 : 9">
                <div class="new-item" @click="toTrends(theory)">
                  <div class="item-title otw-1" :title="theory.name">{{ theory.name }}</div>
                  <div class="trend-date">{{ format(theory.pubDate) }}</div>
                  <div class="item-desc otw-4">{{ extractText(theory.content) }}</div>
                </div>
              </el-col>
            </template>
          </el-row>
        </div>
      </div>
      <div class="trends-r">
        <div class="more-function">
          更多功能
          <div class="line"></div>
          <!-- <div class="desc">More function</div> -->
        </div>
        <div class="common-r-title">
          一学一报
        </div>
        <div class="function-list">
          <div class="function-item" @click="newTab('/backend/learn-filling')">
            <img src="@/assets/images/front/diandan.png">
            <div class="fun-item-title">一学一报</div>
          </div>
        </div>
        <div class="common-r-title">
          申报
        </div>
        <div class="function-list">
          <div class="function-item" @click="newTab('/backend/learn-fund')">
            <img src="@/assets/images/front/fund_item.png">
            <div class="fun-item-title">社科基金课题申报</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学习月历 -->
    <div class="common-title main-wrapper">
      <!-- <div class="title"><span><span>学习</span>日历</span>/Learning Calendar</div> -->
      <div class="title"><span><span>学习</span>日历</span></div>
      <!-- <div class="more">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div> -->
    </div>
    <div class="calendar design-wrapper">
      <div class="calendar-l">
        <div class="calendar-main">
          <div class="calendar-title">
            <div class="calendar-logo">{{ currentDate.format('YYYY年M月') }}</div>
            <div class="current-date">
              <div @click="preMonthACtion" class="pre">
                <el-icon>
                  <Back />
                </el-icon>
              </div>
              <div class="show-date">{{ currentDate.format('YYYY年 MM月') }}</div>
              <div @click="nextMonthACtion" class="next">
                <el-icon>
                  <Right />
                </el-icon>
              </div>
            </div>
          </div>
          <div class="week">
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>日</div>
          </div>
          <div class="date-list">
            <div @click="selectDate(calItem)"
              :class="['date-item', activeDate == calItem.dayStr ? 'active-date' : '', handleDateStyle(calItem)]"
              v-for="(calItem, calIndex) in  calendarList" :key="calIndex">
              {{ calItem.day }}
            </div>
          </div>
        </div>
      </div>
      <div v-loading="calLoding" class="calendar-r">
        <div class="r-content">
          <div class="r-item">
            <template v-if="showCalData[0]">
              <div class="date">
                <span>{{ currentDate.format('DD') }}</span>
                <span>{{ currentDate.format('MM') }}月</span>
              </div>
              <div class="title otw-3">{{ showCalData[0].name }}</div>
              <!-- <div class="time">
            <el-icon>
              <Clock />
            </el-icon>
            2023-07-07
          </div>
          <div class="location">
            <el-icon>
              <Location />
            </el-icon>
            位于湖北省武汉市洪山区
          </div> -->
            </template>
          </div>
          <div :class="['pre', pageNumber == 1 ? 'not-allow' : '']" @click="calPageAction('pre')">
            <el-icon>
              <ArrowLeft />
            </el-icon>
          </div>
        </div>
        <div class="line"></div>
        <div class="r-content">
          <div class="r-item">
            <template v-if="showCalData[1]">
              <div class="date">
                <span>{{ currentDate.format('DD') }}</span>
                <span>{{ currentDate.format('MM') }}月</span>
              </div>
              <div class="title otw-3">{{ showCalData[1].name }}</div>
            </template>
          </div>
          <div :class="['next', totalPages == 0 || (pageNumber == totalPages) ? 'not-allow' : '']"
            @click="calPageAction('next')">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="common-title main-wrapper">
      <!-- <div class="title"><span><span>专题</span>学习</span>/project-based learning</div> -->
      <div class="title"><span><span>专题</span>学习</span></div>
      <!-- <div class="more">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div> -->
    </div>
    <div class="project main-wrapper">
      <div class="project-l">
        <swiper :modules="[Autoplay, Pagination]" :pagination="{ clickable: true }" autoplay>
          <swiper-slide v-for="(studyItem, studyIndex) in studyNewsList" :key="studyIndex">
            <div class="scroll-item">
              <img class="scroll-img" :src="getImageUrl(studyItem.subjectPicture)">
              <div class="scroll-title otw-1">{{ studyItem.name }}</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="project-r">
        <div v-if="studyNewsList.length > 0" class="r-top">
          <div class="main-title otw-1">{{ studyNewsList[0].name }}</div>
          <div class="zhaiyao otw-4">
            {{ studyNewsList[0].subjectType }}
          </div>
        </div>
        <div class="r-bottom">
          <div v-for="(studyItem, studyIndex) in studyNewsList" :key="studyIndex"
            @click="toOtherPage(studyItem.subjectCnkiUrl)" class="info">
            <div clas="label otw-1">{{ studyItem.name }}</div>
            <div clas="date">{{ format(studyItem.pubDate) }}</div>
          </div>
        </div>
        <!-- <div class="more">更多>></div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default { name: 'TheoreticalLearning' }
</script>
<script setup>
import { ref } from 'vue';
import { Back, Right, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css'
import 'swiper/css/pagination';
import moment, { format } from '@/plugins/moment.js'
import { useSystemStore } from '@/stores/modules/system.js';
import { getCalendar, extractText, getImageUrl } from '@/utils/index.js'
import { http } from '@/utils/http/index.js'

const systemStore = useSystemStore()

/**设置头部 */
systemStore.headerType = 'learning'
systemStore.headerBgcolor = 'normal'
systemStore.headerFontColor = '0'

const newTab = url => window.open(url)

/**学习动态 */
const theoryList = ref([])
http.$POST('/TheoryStudy/GetTheoryStudyNewsList', { pageSize: 3, pageIndex: 1 }).then(res => {
  if (res.isError) return
  theoryList.value = res.result.dataLst
})

/**去动态详情页 */
const toTrends = (item) => {
  window.open('/trends-list/trends-details?type=theory&id=' + item.id)
}

/**学习日历 */
const currentDate = ref(moment())
// 选中的日期
const activeDate = ref('')
const calendarList = ref(getCalendar(currentDate.value))

const calLoding = ref(false)
/**接口数据 */
const calData = ref([])
/**展示的分页数据 */
const showCalData = ref([])
const pageNumber = ref(1)
const totalPages = ref(0)
const getStudyPlanByDate = () => {
  const monthStart = currentDate.value.clone().format('YYYY-MM-01')
  const monthEnd = currentDate.value.clone().clone().endOf('month').format('YYYY-MM-DD')
  let dfi;
  if (activeDate.value) {
    dfi = {
      logic: 0,
      filters: [
        { field: 'studyStartDate', operator: 13, value: activeDate.value },
        { field: 'studyEndDate', operator: 11, value: activeDate.value },
      ]
    }
  } else {
    dfi = {
      logic: 1,
      filters: [
        {
          // 开始日期在当前月之前，但结束日期在当前月之后。
          logic: 0,
          filters: [
            { field: 'studyStartDate', operator: 13, value: monthStart },
            { field: 'studyEndDate', operator: 11, value: monthEnd },
          ]
        },
        {
          // 开始日期和结束日期都在当前月内。
          logic: 0,
          filters: [
            { field: 'studyStartDate', operator: 11, value: monthStart },
            { field: 'studyEndDate', operator: 13, value: monthEnd },
          ]
        },
        {
          // 开始日期在当前月内，但结束日期在当前月之后或者与当前月相同。
          logic: 0,
          filters: [
            { field: 'studyStartDate', operator: 11, value: monthStart },
            { field: 'studyEndDate', operator: 11, value: monthEnd },
          ]
        },
        {
          // 开始日期在当前月之前结束日期在当前月之中
          logic: 0,
          filters: [
            { field: 'studyStartDate', operator: 12, value: monthStart },
            { field: 'studyEndDate', operator: 11, value: monthStart },
            { field: 'studyEndDate', operator: 13, value: monthEnd },
          ]
        }
      ]
    }
  }

  calLoding.value = true
  http.$POST('/TheoryStudy/GetTheoryStudySubjectLocalList', { dfi }).then(res => {
    if (res.isError) return
    calData.value = res.result.dataLst
    pageNumber.value = 1
    calPageAction()
  }).finally(() => calLoding.value = false)
}

getStudyPlanByDate()
/**选定日期 */
const selectDate = (calItem) => {
  if (!calItem.isCurrentMonth) return
  // 再次点击可取消
  activeDate.value == calItem.dayStr ? (activeDate.value = '') : (activeDate.value = calItem.dayStr)
  getStudyPlanByDate()
}
/**学习主题列表翻页 */
const calPageAction = (type) => {
  if (type == 'pre') {
    if (pageNumber.value == 1) return
    pageNumber.value = pageNumber.value - 1
  }
  if (type == 'next') {
    if (pageNumber.value == totalPages.value) return
    pageNumber.value = pageNumber.value + 1
  }


  const pageSize = 2
  totalPages.value = Math.ceil(calData.value.length / pageSize);

  // 计算起始索引和结束索引
  const startIndex = (pageNumber.value - 1) * pageSize;
  const endIndex = Math.min(startIndex + pageSize, calData.value.length);
  showCalData.value = calData.value.slice(startIndex, endIndex);
}
const preMonthACtion = () => {
  activeDate.value = ''
  currentDate.value = currentDate.value.clone().subtract(1, 'months')
  calendarList.value = getCalendar(currentDate.value)
  getStudyPlanByDate()
}
const nextMonthACtion = () => {
  activeDate.value = ''
  currentDate.value = currentDate.value.clone().add(1, 'months')
  calendarList.value = getCalendar(currentDate.value)
  getStudyPlanByDate()
}
// 处理当前日期展示效果
const handleDateStyle = (date) => {
  if (!date.isCurrentMonth) return 'not-current-m'
}


/**专题学习 */
const studyNewsList = ref([])
http.$POST('/TheoryStudy/GetTheoryStudySubjectCnkiList', { pageSize: 4, pageIndex: 1 }).then(res => {
  if (res.isError) return
  studyNewsList.value = res.result.dataLst
})

const toOtherPage = url => window.open(url)
</script>
<style lang="scss" scoped>
.theoretical-learning {
  width: 100%;

  .banner {
    width: 100%;
    min-width: $wrapperWidth;
    height: 370px;
    background-image: url(@/assets/images/front/xuanchuan_banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 39px;

    .title-t {
      font-size: 80px;
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 10px;
      text-shadow: 0px 3px 6px #000000;
      -webkit-text-stroke: 1px #FFFFFF;
      margin-bottom: 31px;
    }

    .title-b {
      font-size: 20px;
      font-weight: 400;
      color: #FFFFFF;
      letter-spacing: 2px;
    }
  }

  .trends {
    display: flex;
    height: 580px;
    gap: 44px;
    margin-bottom: 30px;

    .trend-date {
      width: 96px;
      height: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--theme-color);
      font-size: 14px;
      border: 1px solid var(--theme-color);
      border-radius: 4px;
    }

    .trends-l {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 13px;

      .l-top {
        display: flex;
        gap: 42px;
        cursor: pointer;

        .new-main {
          display: flex;
          flex-direction: column;
          flex: 1;

          .title {
            font-size: 24px;
            font-weight: bold;
            color: #4D4D4D;
            margin: 12px 0;
          }

          .new-desc {
            flex: 1;
            height: 0;
            font-size: 16px;
            font-weight: 400;
            color: #4D4D4D;
            line-height: 28px;
          }

          .more-button {
            width: 98px;
            height: 39px;
          }
        }

        .top-img {
          width: 423px;
          height: 283px;
          display: block;
          object-fit: cover;
        }
      }

      .l-bottom {
        flex: 1;

        .new-item {
          height: 100%;
          border-top: 2px solid #F4F4F4;
          padding-top: 31px;
          cursor: pointer;

          .item-title {
            font-size: 22px;
            font-weight: 500;
            color: #434343;
          }

          .trend-date {
            margin: 11px 0 25px;
          }

          .item-desc {
            font-size: 16px;
            font-weight: 400;
            color: #434343;
            line-height: 28px;
          }
        }
      }
    }

    .trends-r {
      padding: 18px 22px 0;
      width: 243px;
      background-color: var(--theme-color);

      .more-function {
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        margin-bottom: 45px;

        .line {
          margin: 5px 0;
          height: 3px;
          width: 26px;
          background-color: #fff;
        }

        .desc {
          font-size: 14px;
          font-weight: 100;
          opacity: 0.8;
        }
      }

      .common-r-title {
        font-size: 18px;
        font-weight: 500;
        color: #FFFFFF;
        font-family: Source Han Sans SC-Medium, Source Han Sans SC;
        border-bottom: 2px solid #B6505C;
        padding-bottom: 8px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 64px;
          height: 2px;
          background-color: #fff;
        }
      }

      .function-list {
        margin: 24px 0 45px;
        display: flex;
        flex-wrap: wrap;
        gap: 22px;

        .function-item {
          cursor: pointer;
          color: #fff;
          display: flex;
          flex-direction: column;

          img {
            width: 33px;
            height: 37px;
            margin-bottom: 13px;
            object-fit: contain;
            margin-left: 18px;
          }

          .fun-item-title {
            font-size: 16px;
          }
        }
      }
    }
  }

  .calendar {
    height: 560px;
    display: flex;
    margin-bottom: 16px;
    background-color: #F0E9DF;

    .calendar-l {
      width: 760px;
      height: 100%;
      background: linear-gradient(89deg, #FFFFFF 0%, #F3EDE5 74%, #F0E9DF 100%);
      position: relative;

      .calendar-main {
        z-index: 3;
        width: 690px;
        position: absolute;
        right: -10%;
        top: 49px;
        height: 454px;
        background: #F3EADD;
        box-shadow: 0px 6px 58px 1px rgba(196, 203, 214, 0.1);
        border-radius: 24px;
        padding: 40px 38px 35px;
        overflow: hidden;

        .calendar-title {
          width: 100%;
          height: 28px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 8px;
          padding-right: 14px;
          margin-bottom: 24px;
          user-select: none;

          .calendar-logo {
            background-image: url(@/assets/images/front/calendar_icon.png);
            background-repeat: no-repeat;
            background-position: left;
            background-size: contain;
            padding-left: 45px;
            font-size: 17px;
            font-weight: bold;
            color: #0A1629;
          }

          .current-date {
            height: 100%;
            color: var(--theme-color);
            font-size: 17px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 26px;

            .pre,
            .next {
              cursor: pointer;
              width: 48px;
              height: 100%;
              border: 1px solid var(--theme-color);
              display: flex;
              align-items: center;
              justify-content: center;

              .el-icon {
                font-size: 18px;
                font-weight: bold;
              }
            }
          }
        }

        .week {
          width: 100%;
          height: 39px;
          font-size: 22px;
          font-weight: 600;
          color: #42434D;
          display: grid;
          grid-template-columns: repeat(7, 39px);
          grid-column-gap: 56px;
          margin-bottom: 16px;

          >div {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .date-list {
          user-select: none;
          width: 100%;
          display: grid;
          grid-template-columns: repeat(7, 39px);
          grid-column-gap: 56px;
          grid-row-gap: 10px;

          .date-item {
            width: 100%;
            height: 39px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all .2s;
            font-size: 14px;
            cursor: pointer;
            color: #202860;
            font-weight: bold;

            &:not(.not-current-m, .fully):hover,
            &.active-date {
              background-color: var(--theme-color);
              color: #fff;
            }

            &.not-current-m {
              cursor: not-allowed;
              color: #999;
            }
          }
        }
      }
    }

    .calendar-r {
      flex: 1;
      height: 100%;
      background-color: #FEFBFC;
      background-image: url(@/assets/images/front/calendar_bg.png);
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 100.2% 135px;
      padding-top: 50px;
      padding-left: 134px;
      padding-right: 104px;
      z-index: 2;

      .r-content {
        margin-top: 33px;
        vertical-align: top;
        display: inline-block;

        .r-item {
          width: 416px;
          height: 384px;
          vertical-align: top;

          .date {
            font-size: 18px;
            font-weight: 500;
            color: #626262;

            &>span:first-child {
              font-size: 51px;
              font-weight: bold;
              color: #7A2E2E;
              margin-right: 12px;
            }
          }

          .title {
            margin-top: 20px;
            font-size: 26px;
            height: 68px;
            font-weight: bold;
            color: #434343;
            margin-bottom: 48px;
          }

          .time,
          .location {
            font-size: 20px;
            font-weight: 600;
            color: #626262;
            margin-bottom: 14px;
            display: flex;
            align-items: center;

            .el-icon {
              margin-right: 15px;
              color: var(--theme-color);
            }
          }

        }
      }

      .line {
        display: inline-block;
        margin: 0 28px;
        width: 2px;
        height: 471px;
        background: #EFEFEF;
      }

      .pre,
      .next {
        width: 33px;
        height: 33px;
        border: 2px solid var(--theme-color);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        color: var(--theme-color);
        font-size: 20px;
        cursor: pointer;
        user-select: none;

        &.not-allow {
          cursor: not-allowed;
          color: #ddd;
          border-color: #ddd;
        }
      }

      .pre {
        margin-left: auto;
      }
    }

  }

  .project {
    display: flex;

    .project-l {
      width: 50%;
      height: 100%;
      margin-right: 2%;

      .scroll-item {
        position: relative;
        padding-bottom: 42px;

        .scroll-img {
          width: 100%;
          height: 438px;
          display: block;
          object-fit: cover;
        }

        .scroll-title {
          position: absolute;
          height: 55px;
          display: flex;
          align-items: center;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.44);
          padding-left: 15px;
          left: 0;
          bottom: 42px;
          font-size: 22px;
          font-weight: 500;
          color: #FFFFFF;
        }
      }

      :deep(.swiper) {
        .swiper-pagination {
          bottom: 16px;

          .swiper-pagination-bullet {
            width: 38px;
            height: 4px;
            border-radius: unset;
            background-color: #EFCECC;
            opacity: unset;
          }

          .swiper-pagination-bullet-active {
            background-color: var(--theme-color);
          }
        }
      }
    }

    .project-r {
      width: 48%;
      height: 480px;
      display: flex;
      flex-direction: column;
      gap: 22px;

      .r-top {
        height: 48%;

        .main-title {
          font-size: 26px;
          color: #333;
          margin-bottom: 20px;
        }

        .zhaiyao {
          color: #888;
          line-height: 38px;
        }
      }

      .r-bottom {
        height: 155px;

        .info {
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          gap: 30px;
          color: #333;
          font-size: 20px;
          cursor: pointer;

          .label {
            font-size: 22px;
            flex: 1;
          }

          .date {
            width: 114px;
          }
        }
      }

      .more {
        text-align: right;
        color: #333;
      }
    }
  }

  .common-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 44px auto 54px;

    .title {
      color: #262626;
      font-size: 20px;

      span {
        font-size: 32px;
        font-weight: 600;

        &>span {
          color: var(--theme-color);
        }
      }
    }

    .more {
      color: #262626;
      font-weight: bold;
      font-size: 20px;
      display: flex;
      align-items: center;

      span {
        cursor: pointer;
        margin: 0 22px;
      }

      .line {
        width: 31px;
        border: 1px solid #D3D3D3;
      }
    }
  }
}
</style>
